import React, { Component } from 'react'

/*
  1. 在父组件中先定义一个接收的方法
  2. 将方法通过属性的方式传递给子组件
  3. 子组件中通过 props 进行直接调用该方法且可以携带参数

  React 中子组件给父组件传递值，其实本质意义还是父组件在给子组件传值，只是我们现在传递过去
  的是一个函数，子组件直接调用该函数即可
*/

class Header extends Component {
  render() {
    return <header onClick={() => {
      // console.log(this);
      // 3. 触发父组件传递的函数
      this.props.fn('你好世界')
    }}>头部组件 </header>
  }
}


function Content(props) {
  return (<>
    <h1 onClick={() => {
      props.getDataFn('黑哈哈哈')
    }}>内容组件 </h1>
  </>)
}

export default class App extends Component {

  // 1. 在父组件中定义一个接收的方法
  getData(val) {
    console.log('父组件接收:' + val);
  }

  render() {
    return (
      <div>
        父级组件
        <hr />
        {/* 2. 将函数发送给子组件 */}
        <Header fn={this.getData} />
        <hr />

        <Content getDataFn={this.getData} />

      </div>
    )
  }
}
